<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法2:事件绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1:v-on指令:s鼠标单击事件</h1>
            <p>我已经被你点击了{{num}}次</p>
            <button v-on:click="num++">点我点我快点我</button>
            <button v-on:click="num--">再点我我就减掉你</button>
            <h3>许多事件处理逻辑会更加复杂,直接把复杂的代码写在差值表达式里面不合适
                因此，对于复杂事件，可以把代码放在方法中,然后进行调用
            </h3>
            <button v-on:click="logInfo()">打印消息</button>
            <button v-on:click="logInfo('我是宇宙中最好的消息')">带参数打印消息</button>
            <h3>我们可以把v-on: 简写成  @</h3>
            <button @click="logInfo('今天')">打印</button>
            <h1>知识点2:键盘事件 keydown 按下按键 keyup 释放按键</h1>
            <input type="text" @keydown="show('我被按下了,救救我！')">
            <input type="text" @keyup="show('我终于被救了')">
            <h1>知识点3:其他事件 dblclick双击事件,contextmenu右击事件,mouseover鼠标上移事件
                mouseout鼠标移开事件
            </h1>
            <button @dblclick="num++">你打我两下我再加</button>
            <button @contextmenu="num++">你用右手打我我再加</button>
            <button @mouseover="num++">你站上来我再加</button>
            <button @mouseout="num--">你走开我就减</button>
            <h1>知识点4:事件修饰符</h1>
            <h3>1.  .once 表示该事件只能被点击一次</h3>
            {{num}}
            <button @click.once="num++">相信我,你只能点一次</button>
            <h3>2.  .prevent 当事件触发时,阻止元素默认的行为</h3>
            <h4>submit有一个默认的行为,即提交后会重新加载页面,通过prevent可以阻止该默认行为</h4>
            <form @submit="handle()">
                <h5>不使用修饰符</h5>
                <button type="submit">提交</button>
            </form>
            <form @submit.prevent="handle()">
                <h5>使用修饰符</h5>
                <button type="submit">提交</button>
            </form>
            <h3>3.  .stop 阻止冒泡</h3>
            <h4>冒泡是内部元素事件被触发后,继续向外层触发事件</h4>
            <div id="box1" @click="box('我是box1')">box1
                <div id="box2" @click.stop="box('我是box2')">box2
                    <div id="box3" @click="box('我是box3')">box3</div>
                </div>
            </div>
            <h3>4.  .capture 事件捕获</h3>
            <h4>如果我们在层叠事件中要先执行某个事件,可以使用capture修饰符
                当内部元素触发时,先处理capture事件修饰符的事件,然后再提交当前事件执行,
                捕获由外到内
            </h4>
            <div id="box1" @click.capture="box('我是box1')">box1
                <div id="box2" @click="box('我是box2')">box2
                    <div id="box3" @click.stop="box('我是box3')">box3</div>
                </div>
            </div>
            <h3>5.  .self 只在绑定了事件的那个对象中使用</h3>
            <div id="box1" @click.capture="box('我是box1')">box1
                <div id="box2" @click.self.stop="box('我是box2')">box2
                    <div id="box3" @click="box('我是box3')">box3</div>
                </div>
            </div>
            <h3>6.监听键盘事件的按键修饰符</h3>
            <p>.enter  .tab .delete(监听删除键和退格键) .esc  .space .up .down .left
                .right .ctrl .shift .alt .meta(window徽标键)
            </p>
            <h4>alt+c 验证当键盘按下这两个建时才反应</h4>
            <input type="text" @keydown.alt.c = "show('我按下了alt和c')">
            <input type="text" @keydown.enter = "show('我按下了enter')">
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                num:0
            }
        },
        methods:{
            logInfo(val){
                console.log(val || "我是世界上最好的消息");
            },
            shom(val){
                console.log(val);
            },
            box(val){
                alert(val)
            }
        }
    }).mount("#app")
</script>

<style>
    #box1{
        height: 200px;
        width: 300px;
        background-color: blue;
    }
    #box2{
        height: 150px;
        width: 250px;
        background-color: rgb(104, 104, 230);
    }
    #box3{
        height: 100px;
        width: 200px;
        background-color: rgb(227, 227, 230);
    }
</style>